<template>
	<div class="system-add-menu-container">
		<el-dialog :title="'分组列表'" :model-value="props.modelValue" width="1000px" :before-close="handleClose">
			<div class="system-menu-search mb15">
				<el-button size="default" type="primary" class="ml10" @click="handleAddGroup()">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增分组
				</el-button>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="created_at" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="content" label="简介" show-overflow-tooltip> </el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="handleEditGroup(scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="handleDelGroup(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose" type="primary" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<AddGroup v-model="isAddGroupDialog" v-if="isAddGroupDialog" @refresh="getApiGroupLists" />
		<EditGroup v-model="isEditGroupDialog" v-if="isEditGroupDialog" :getData="editGroupData" @refresh="getApiGroupLists" />
	</div>
</template>

<script setup name="setGroup">
import AddGroup from './addGroup.vue';
import EditGroup from './editGroup.vue';
import { getApiGroupList, delApiGroup } from '@/api/system/api';

import { ElMessageBox, ElMessage } from 'element-plus';

const emits = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: {
		type: Boolean,
	},
});

const tableData = ref([]);
const getApiGroupLists = async () => {
	let res = await getApiGroupList();
	if (res.code === 0) {
		tableData.value = res.data.data;
	}
};
getApiGroupLists();

// 打开新增分组弹窗
const isAddGroupDialog = ref(false);
const handleAddGroup = () => {
	isAddGroupDialog.value = true;
};
// 打开编辑分组弹窗
const isEditGroupDialog = ref(false);
const editGroupData = ref(null);
const handleEditGroup = (row) => {
	editGroupData.value = row;
	isEditGroupDialog.value = true;
};
// 删除分组
const handleDelGroup = (row) => {
	ElMessageBox.confirm(`此操作将永久删除分组：${row.name}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let res = await delApiGroup({ id: row.id });
			console.log(res);
			if (res.code === 0) {
				ElMessage.success('删除成功');
				getApiGroupLists();
			} else {
				ElMessage.error('删除失败');
			}
		})
		.catch(() => {});
};

// 关闭弹窗
const handleClose = () => {
	emits('update:modelValue', false);
};
</script>
